<template>
  <el-dialog
    top="30px"
    width="80%"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div @keyup.enter="getAllData()">
      <el-form class="query-table-form" :inline="true">
        <el-form-item>
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable>
            <i class="el-icon-search el-input__icon" slot="suffix" @click="getAllData()"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <select-address
            v-model="params.address_code"
            placeholder="地址查询"
            clearable
            :auto-top="true"
            @change="getAllData()"
          ></select-address>
        </el-form-item>
        <el-form-item>
          <c-select
            clearable
            v-model="params['gua_type.eq']"
            placeholder="业务模式"
            :options="enumGuaType"
            @change="getAllData()"
          ></c-select>
        </el-form-item>
        <el-form-item>
          <c-select
            v-model="params['is_history.eq']"
            clearable
            placeholder="是否是历史数据"
            :options="{
              0: '否',
              1: '是',
            }"
            @change="getAllData()"
          ></c-select>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <c-select
              v-model="seachParams"
              clearable
              placeholder="项目状态"
              :options="searchOptions"
              @change="setSeachParams"
            ></c-select>
          </el-form-item>
        </el-form-item>

        <el-form-item>
          <el-input v-model="params.mobile_no" placeholder="电话号码查询" clearable>
            <i class="el-icon-search el-input__icon" slot="suffix" @click="getAllData()"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getAllData()">查询</el-button>
        </el-form-item>
        <el-form-item class="float-right">
          <el-button
            icon="el-icon-download"
            :loading="exportLoading"
            @click="exportExcel('项目受理')"
          >
            导出
          </el-button>
        </el-form-item>
      </el-form>
      <small class="text-warning">在担保意向函盖章前都可在此处修改项目基本信息</small>
      <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
        <template v-slot:address="scope">
          <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
        </template>
        <template v-slot:status="scope">
          <el-popover
            v-if="+scope.row.confuse_status === 3"
            placement="top-start"
            title="拒绝理由"
            width="200"
            trigger="hover"
            :content="scope.row.confuse_des"
          >
            <div slot="reference" class="badge" :class="`badge-${scope.row.statusStyle}`">
              {{ scope.row.statusLable }}
            </div>
          </el-popover>

          <div v-else class="badge" :class="`badge-${scope.row.statusStyle}`">
            {{ scope.row.statusLable }}
          </div>
        </template>
        <template v-slot:name="scope">
          <el-popover placement="top-start" title="项目经理" trigger="hover">
            <div>
              <div>{{ `A角： ${scope.row.res_a_name || '-'}；` }}</div>
              <div class="mb-2">{{ `电话： ${scope.row.res_a_phone || '-'}` }}</div>
              <div>{{ `B角： ${scope.row.res_b_name || '-'}；` }}</div>
              <div>{{ `电话： ${scope.row.res_b_phone || '-'}` }}</div>
            </div>
            <div slot="reference">
              <div class="status-label badge-info text-left w-100">
                <div>A角:{{ scope.row.res_a_name }}</div>
                <div>B角:{{ scope.row.res_b_name }}</div>
              </div>
            </div>
          </el-popover>
        </template>
        <template v-slot:guaType="scope">
          <div>{{ scope.row.guaType }}</div>
          <div
            v-if="scope.row.channel_type"
            class="badge"
            :class="+scope.row.channel_type ? 'badge-warning' : 'badge-info'"
          >
            {{ enumChannelType[scope.row.channel_type] }}
          </div>
        </template>
      </c-table>
      <div class="query-pagination">
        <div></div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="totalCount"
          @current-change="getAllData"
        ></el-pagination>
      </div>

      <el-dialog
        :visible.sync="reportVisible"
        :close-on-click-modal="false"
        append-to-body
        top="30px"
        width="80%"
      >
        <el-tabs v-model="active">
          <el-tab-pane label="项目信息" name="first">
            <info-view :related-data="relatedData"></info-view>
          </el-tab-pane>
          <el-tab-pane label="申请表" v-if="+relatedData.form_type === 1">
            <apply-table :query-id="queryId"></apply-table>
          </el-tab-pane>
          <el-tab-pane label="附件">
            <attach-view :query-id="queryId" :visible="reportVisible"></attach-view>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>

      <letter-approval
        :visible.sync="editVisible"
        :query-id="editId"
        @success="handlerSuccess"
      ></letter-approval>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { enumGuaType, enumProjectType, enumChannelType } from '@/bigcredit/views/program/enum'
// import { projectShowJobs } from '@/credit/plugins/constant'

import SelectAddress from '@/components/select/SelectAddress'
import AttachView from '@/credit/components/AttachView'
// import CreditFile from '@/credit/components/creditFile/CreditCard'
// import RecommendFile from '@/credit/views/city/program/RecommendFile'
// import ApprovalEdit from '@/credit/views/city/program/ApprovalEdit'
import taskTableMixin from '@/credit/mixin/self/taskTable'
import InfoView from '@/bigcredit/views/program/components/Info'

import { searchOptions } from '@/cadmin/views/org/CreditCount'
import ApplyTable from '@/bigcredit/views/program/components/apply/ApplyTable'
import letterApproval from '@/bigcredit/views/eletter/components/MainDialog'
export default {
  components: {
    SelectAddress,
    // CreditFile,
    AttachView,
    // ApprovalEdit,
    // RecommendFile,
    InfoView,
    ApplyTable,
    letterApproval,
  },
  mixins: [taskTableMixin],
  props: {
    visible: Boolean,
  },
  data() {
    return {
      searchOptions,
      enumGuaType,
      enumChannelType,
      order: {
        N1is_history: 'asc',
        N2Create_time: 'desc',
        N3approved_date: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'recommend_status.eq': 1,
        'gua_type.neq': 3,
        'confuse_status.neq': 3,
        'is_approval.eq': 1,
        subKey: 'ele_letter_info.customer_related_id',
        // 'claim_status.eq': '1'
      },
      editRow: {},
      queryId: '',
      reportVisible: false,
      exportLoading: false,
      relatedData: {},
      // tableName: 'customer_related',
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '客户名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '项目类型', prop: 'projectType', align: 'center' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        // { attrs: { label: 'address_code', prop: 'address_code', align: 'center' } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '创建时间', prop: 'createTime', align: 'center', width: 100 } },
        { attrs: { label: '项目来源', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '项目经理', prop: 'resName', width: 100 }, slot: 'name' },
        {
          attrs: { label: '业务模式', prop: 'guaType', align: 'center' },
          slot: 'guaType',
        },
        {
          attrs: { label: '操作', align: 'center', width: 140 },
          operations: [
            {
              content: '新增保函',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      statusIndex: -1,
      cellStyles: {},
      relatedId: '',
      seachParams: '',
      otherParams: {},

      active: 'first',

      editId: '',
      editVisible: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'userId', 'job']),
    // isShowAllJob() {
    //   return projectShowJobs.includes(this.job)
    // }
  },
  watch: {},
  created() {
    this.params['orWhere.service_id.eq'] = this.clientId
    this.params['orWhere.gua_service_id.eq'] = this.clientId
    // if (!this.isShowAllJob) {
    //   this.params['orWhere.res_a.eq'] = this.userId
    //   this.params['orWhere.res_b.eq'] = this.userId
    // }

    this.getAllData()
  },
  mounted() {},
  methods: {
    handlerSuccess() {
      this.$emit('success')
      this.beforeClose()
    },
    handleEdit(row) {
      this.editVisible = true
      this.editId = row.customer_related_id
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getAllData(a = 1) {
      this.getData(a)
    },
    getParams() {
      return {
        ...this.params,
        ...this.otherParams,
      }
    },
    setSeachParams(a) {
      const data = this.searchOptions.find(item => item.value === a) || {}
      this.otherParams = data.params || {}
      this.getAllData()
    },

    dataAdapter(item) {
      if (+item.confuse_status === 3) {
        item.statusLable = '已拒绝'
        item.statusStyle = 'danger'
      } else {
        item.statusLable = +item.is_approval === 0 ? '未受理' : '已受理'
        item.statusStyle = +item.is_approval === 0 ? 'info' : 'success'
      }
      item.projectSouce = (item.submit_client_name || '') + (item.submit_person_name || '')
      item.createTime = this.$utils.dateFormat(
        item.recommend_time || item.create_time,
        'yyyy.MM.dd'
      )
      item.projectType = enumProjectType[item.project_type] || '-'
      item.guaType = enumGuaType[item.gua_type]
      item.resName = `A角: ${item.res_a_name} B角: ${item.res_b_name}`
      return item
    },

    handleView(row) {
      this.active = 'first'
      this.queryId = row.customer_related_id
      this.reportVisible = true
      this.relatedData = row
    },
  },
}
</script>
<style scoped>
.decoration {
  text-decoration: line-through;
}
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
